import React from "react";
import PropTypes from 'prop-types';
import copyToBoard from "../utils/CopyToBoard";
import openNotification from "../utils/MessageBoard"
import {Button,Row,Col} from "antd"
import "./FileItem.css"

export default class FileItem extends React.Component {

    copyToBoard = (text) => {
        copyToBoard(text)
        openNotification("复制成功");
    }

    render() {

        const {is_dir, name, relative_path, url, toDir} = this.props;

        const pName = <a className="file-url-string" href={url}>{name}</a>

        const nextStep = is_dir === true
            ? <Button className="ant-btn-dashed" onClick={() => toDir(relative_path)}>进入</Button>
            : <Button className="ant-btn-dashed" onClick={() => this.copyToBoard(url)}>复制</Button>

        return (
            <div className="file-items">
                <Row >
                    <Col span={6} />
                    <Col span={11}>{pName}</Col>
                    <Col span={1}>{nextStep}</Col>
                    <Col span={6} />
                </Row>
            </div>
        )
    }
};

FileItem.protoTypes = {
    is_dir: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    relative_path: PropTypes.string.isRequired,
    url: PropTypes.string.isRequired,
};